import React, { Component } from 'react'
import { StatusBar, TouchableOpacity, View, Image, FlatList, BackHandler, ScrollView, Text, KeyboardAvoidingView } from 'react-native'
import { connect } from 'react-redux'
import { Empty, Loading } from '../Components'
import VipActions from '../Redux/VipRedux'

// Styles
import styles from './Styles/VipScreenStyle'

class VipScreen extends Component {
  static navigationOptions = {
    title: '会员专享'
  }
  constructor(props) {
    super(props)
    this.props.getVip()
  }
  componentDidMount() {
    BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
  }
  componentWillUnmount() {
    BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
  }
  onBackPress = () => {
    this.props.navigation.goBack()
    return true
  }
  render () {
    let mainView = null
    if (this.props.vip.fetching) {
      mainView = <Loading />
    } else if (!this.props.vip.payload) {
      mainView = <Empty />
    }
    const { navigate } = this.props.navigation
    mainView = (
        <FlatList
          style={styles.container}
          data={this.props.vip.payload}
          keyExtractor={(item,index)=>index}
          renderItem={({item}) =>
              <TouchableOpacity
                key={item.id}
                activeOpacity={0.6}
                onPress={()=>navigate('CommodityDetailScreen',{id:item.id})}
                style={styles.item}>
                <Image source={{uri:item.img}} style={styles.cover} />
                <View style={styles.itemContainer}>
                  <Text style={styles.title}>{item.name}</Text>
                  <Text>
                    <Text
                      style={styles.price}>{item.member_price}</Text>  <Text
                      style={styles.oriPrice}>({item.price})</Text>
                  </Text>
                </View>
              </TouchableOpacity>
          }
        />
    )
    return (
      <View style={{flex:1}}>
        <StatusBar translucent={false} barStyle='dark-content' backgroundColor='white' />
        {mainView}
      </View>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    vip: state.vip
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    getVip: () => dispatch(VipActions.vipRequest()),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(VipScreen)
